<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js数组排序问题</title>
    <style>
        body ,p,img{ margin: 0px; padding: 0px}
        .box{ background-color: #eeeeed;position: relative; width: 692px; height: 380px; margin: 10px auto; padding: 0px 14px;}
        .warp { width: 165px; height: 135px; border: 4px solid #fdfdfc; float: left;}
        .warp img{width: 163px; height: 105px; display: block}
        .warp p{ height: 25px;width: 163px; line-height: 25px; text-align: center; font-size: 14px; color: #2a79b3}
        #btn{ width:692px;height: 50px;text-align: center; line-height: 50px; }
        #btn button{ width: 120px; height: 30px; border: none; background-color: #008394; color: #fff; cursor: pointer;}
    </style>
    <script>
        window.onload=function(){
            var arr=[{"src":"img/arr/1.jpg","title":"1-温馨办公","num":1},
                      {"src":"img/arr/2.jpg","title":"2-游戏桌面","num":2},
                      {"src":"img/arr/3.jpg","title":"3-汽车摇滚","num":3},
                      {"src":"img/arr/4.jpg","title":"4-狭路相逢","num":4},
                      {"src":"img/arr/5.jpg","title":"5-棒球小子","num":5},
                      {"src":"img/arr/6.jpg","title":"6-球鞋动力","num":6},
                      {"src":"img/arr/7.jpg","title":"7-官方游戏","num":7},
                      {"src":"img/arr/8.jpg","title":"8-指尖社区","num":8}
                     ]
            var  warp=document.getElementById("warp");
            var  btn=document.getElementById("btn");
            var btn1=btn.getElementsByTagName("button");
            init();
            function init(){
                var src="";
                for(var i=0;i<arr.length;i++){
                    var obj=arr[i];
                    var index=0;
                    for(var item in obj){
                        if(index==0){
                            src+='<div class="warp"><img src="'+obj["src"]+'"><p>'+obj["title"]+'</p></div>'
                        }
                        index++;
                    }
                }
                warp.innerHTML=src;
            }
            btn1[0].onclick=function(){
                arr.sort(compare2('num'))
                init();
            }
            btn1[1].onclick=function(){
                shuffle(arr);
                init();
            }
            btn1[2].onclick=function(){
                arr.sort(compare1('num'))
                init();
            }
            /*----升序----*/
            function compare1(property){
                return function(a,b){
                    var value1 = a[property];
                    var value2 = b[property];
                    return value1-value2;
                }
            }
            /*----降序----*/
            function compare2(property){
                return function(a,b){
                    var value1 = a[property];
                    var value2 = b[property];
                    return value2-value1;
                }
            }
            /*----无序----*/
            function shuffle(array) {
                var tmp, current, top =array.length;
                if(top) while(--top){
                    current =Math.floor(Math.random() * (top + 1));
                    tmp =array[current];
                    array[current] =array[top];
                    array[top] = tmp;
                }
                return array;
            }
        }
    </script>
</head>
<body>
<div class="box">
   <div id="btn">
        <button>从大到小</button>
        <button>打乱顺序</button>
       <button>从小到大</button>
    </div>
    <div id="warp">
     <!--   <div class="warp">
            <img src="img/arr/1.jpg">
            <p>1-温馨办公</p>
        </div>
        <div class="warp">
            <img src="img/arr/1.jpg">
            <p>1-温馨办公</p>
        </div>
        <div class="warp">
            <img src="img/arr/1.jpg">
            <p>1-温馨办公</p>
        </div>
        <div class="warp">
            <img src="img/arr/1.jpg">
            <p>1-温馨办公</p>
        </div>
        <div class="warp">
            <img src="img/arr/1.jpg">
            <p>1-温馨办公</p>
        </div>
        <div class="warp">
            <img src="img/arr/1.jpg">
            <p>1-温馨办公</p>
        </div>
        <div class="warp">
            <img src="img/arr/1.jpg">
            <p>1-温馨办公</p>
        </div>
        <div class="warp">
            <img src="img/arr/1.jpg">
            <p>1-温馨办公</p>
        </div>-->
    </div>
</div>

</body>
</html>